<template>
  <div>
    <el-upload :action="uploadFileUrl" :on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleSuccess" :on-exceed="handleExceed"
      :file-list="fileList" :list-type="listType" :limit="maxCount" :show-file-list="showFile">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    // 图片属性数组
    value: Array,
    // 最大上传数量
    maxCount: {
      type: Number,
      default: 30
    },
    listType: {
      type: String,
      default: "picture-card"
    },
    showFile: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    fileList() {
      let fileList = [];
      for (let i = 0; i < this.value.length; i++) {
        fileList.push({ url: this.value[i] });
      }
      return fileList;
    }
  },
  data() {
    return {
      uploadFileUrl: window.SITE_CONFIG.baseUrl + "/thirdparty/oss/upload",
      dialogVisible: false,
      dialogImageUrl: null
    };
  },
  methods: {
    emitInput(fileList) {
      let value = [];
      for (let i = 0; i < fileList.length; i++) {
        value.push(fileList[i].url);
      }
      this.$emit("input", value);
    },
    handleRemove(file, fileList) {
      this.emitInput(fileList);
    },
    handlePreview(file) {
      this.dialogVisible = true;
      this.dialogImageUrl = file.url;
    },
    handleSuccess(res, file) {
      this.fileList.push({
        name: file.name,
        url: res.data
      });
      this.emitInput(this.fileList);
    },
    handleExceed() {
      this.$message({
        type: "warning",
        message: "最多只能上传" + this.maxCount + "张图片",
        duration: 1000
      });
    }
  },
  created() {

  },
  mounted() {

  },
  components: {},
}
</script>

<style>
</style>